<template>
    <div class="children_router media_children_router" :class="asidemenu ? 'open':'close'">
        <p v-html="routers.name" class="textc lh60 bbdashd2 fs22 ffpf"></p>
        <ul>
            <li v-for="(v,k) in routers.data"
                :key="k"
                class="bbdasheee fs19 ffpf curpointer chil_outer_li oyh" :class="[one_open[k] ? 'is_open' : '']">
                <div class="pl18 level_1_div" @click="oneTap(k,v.term_id,v.is_status)" :class="[two_id == v.term_id ? 'cred' : '' ]">
                    <span class="square_arrow iconfont icon-jiantou"></span>
                    <span  v-html="v.name" class=""></span>
                </div>
                <!--二级-->
                <ul v-if="v.data" class="level_2_ul oyh" :class="[one_open[k] ? '' : 'h0','level_2_ul_'+k]">
                    <li v-for="(v2,k2) in v.data"
                        class="fs16 c333 router_2_li"
                        :key="k2"
                        :class="[two_open[k][k2] ? 'is_open' : '' ,three_id == v2.term_id ? 'hover' : '' ]">
                        <div class=" pl21 pr10 " @click="twoTap(k,k2,v.term_id,v2.term_id,v2.is_status)">
                            <span class="level_two_arrow fs12 caaa pr19">>></span>
                            <span v-html="v2.name" class="level_2_text"></span>
                        </div>
                        <!--三级-->
                        <ul v-if="v2.data" class="level_3_ul oyh" :class="['level_3_ul'+k2,two_open[k][k2] ? '' : 'h0' ]" >
                            <!--:style="{'height':two_open[k][k2] ? 'calc( ' + v2.childrens.length + ' * .44rem)' : '0' }"-->
                            <li v-for="(v3,k3) in v2.data"
                                :key="k3"
                                @click="threeTap(k,k2,v.term_id,v2.term_id,v3.term_id,v3.is_status)">
                                <p class="level_3_li" :class="four_id == v3.term_id ? 'hover' : '' ">
                                    <span class="el-icon-caret-right disnone"></span>
                                    <span class="fs14" v-html="v3.name"></span>
                                </p>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

    </div>
</template>

<script>
    export default {
        name: "ChildrenRouter",
        props:['routers','two_id','three_id','four_id'],
        data(){
            return{
                one_open:[],
                two_open:[],
                one_height:[],
                asidemenu:false
            }
        },
        created(){
            let v = this , _two = [];
            this.routers.data.forEach(function (item,index) {
                v.one_open.push(false);
                v.one_height.push(0);
                if(item.data){//二级
                    item.data.forEach(function (item2,index2) {
                        _two.push(false);
                    });
                    v.two_open.push(_two);
                    _two = [];
                }else {
                    v.two_open.push([false])
                }
            });
        },
        methods:{
            handleOpen(key, keyPath) {
                this.$emit('handleOpen',key,keyPath);
            },
            handleClose(key, keyPath) {
                this.$emit('handleClose',key,keyPath);
            },
            oneTap(key,twoid,status){//点击一级分类
                if(this.routers.data[key].data){//有二级分类
                    this.$set(this.one_open,key,!this.one_open[key]);
                    var length = this.routers.data[key].data.length,
                        el = document.getElementsByClassName('level_2_ul_'+key)[0];
                    if(!this.one_open[key]){return}
                    el.style.height = length * 0.5 + 'rem';
                    setTimeout(function () {
                        el.style.height = '';
                    },200);
                    return
                }
                this.$emit('handleOpen',{oneid:twoid,method:'one',index:key,status:status});
                setTimeout(()=>{
                    this.menuShow();
                },300)
            },
            twoTap(k1,k2,oneid,twoid,status){//点击二级分类
                if(this.routers.data[k1].data[k2].data){//有三级分类
                    this.$set(this.two_open[k1],k2,!this.two_open[k1][k2]);
                    if(!this.two_open[k1][k2]){return}
                    var length = this.routers.data[k1].data[k2].data.length ,
                        el = document.getElementsByClassName('level_3_ul'+k2)[0];
                    el.style.height = length * 0.44 + 'rem';
                    setTimeout(function () {
                        el.style.height = '';
                    },200);
                }else{
                    this.$emit('handleOpen',{oneid:oneid,twoid:twoid,method:'two',index:k1,status:status});
                    setTimeout(()=>{
                        this.menuShow();
                    },300)
                }
            },
            threeTap(index1,index2,oneid,twoid,threeid,status){
                this.$emit('handleOpen',{oneid:oneid,twoid:twoid,three:threeid,method:'three',index:index1,status:status});
                setTimeout(()=>{
                    this.menuShow();
                },300)
            },
            menuShow(){//显示、隐藏侧边栏
                this.asidemenu = !this.asidemenu;
            }
        }
    }
</script>

<style>
    .children_router{
        width: 15.83%;
        background: #fff;
        font-size: .18rem;
        color: #333;
        line-height: .54rem;
        min-height: 6.03rem;
    }
    .square_arrow{
        font-size: .18rem;
        color: #bfbfbf;
        margin-right: .15rem;
    }
    .chil_outer_li:hover .square_arrow ,.chil_outer_li:hover{
        color: #bf000e;
    }
    .router_2_li:hover ,.router_2_li.hover{
        background: #bf000e;
        color: #fff;
    }
    .router_2_li:hover .level_two_arrow , .router_2_li.hover .level_two_arrow{
        color: #fff;
    }
    .level_3_li{
        background: #f5f5f5;
        position: relative;
        line-height: .45rem;
        padding-left: .58rem;
        color: #333;
    }
    .level_3_li .el-icon-caret-right{
        color: #bf000e;
        font-size: .1rem;
        position: absolute;
        left: .36rem;
        line-height: .45rem;
        display: none;
    }
    .level_3_li:hover .el-icon-caret-right ,.level_3_li.hover .el-icon-caret-right {
        display: block;
    }
    .level_2_ul,.level_3_ul{
        transition:all .2s;
    }
    .is_open .level_2_ul , .router_2_li.is_open .level_3_ul{
        display: block;
    }
    .level_1_div.cred span{
        color: #bf000e;
    }
    @keyframes slideopen {
        0%{height: 0}
        10%{height: 100px}
        100%{height: auto}
    }
    .slideopen{
        animation-name:slideopen;
        animation-duration:0.3s;
        animation-timing-function: linear;
    }
</style>



























